<%@page import="java.util.Date" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <script src="../../resources/js/echarts.min.js"></script>
    <%@include file="../../resources/inc/head.jsp" %>
</head>
<body style="overflow: auto">

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">

                <div class="layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">今日订单</div>
                        <div class="layui-card-body">

                            <div class="layui-carousel layadmin-carousel layadmin-backlog">
                                <div carousel-item>
                                    <ul class="layui-row layui-col-space10">
                                        <li class="layui-col-xs6">
                                            <a lay-href="/manager/product/orderHeader/index.html?todayOrder=1"
                                               class="layadmin-backlog-body">
                                                <h3>交易笔数</h3>
                                                <p><cite>${totalSum}<span style="font-size:large">单</span></cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="/manager/product/orderHeader/index.html?todayOrder=2"
                                               class="layadmin-backlog-body">
                                                <h3>成功笔数</h3>
                                                <p><cite>${succSum}<span style="font-size:large">单</span></cite></p>
                                            </a>
                                        </li>
                                        <li class="layui-col-xs6">
                                            <a lay-href="/manager/product/orderHeader/index.html?todayOrder=2"
                                               class="layadmin-backlog-body">
                                                <h3>成交金额(元)</h3>
                                                <p><cite>${bargainSum}<span style="font-size:large"></span></cite></p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">公告</div>
                        <div class="layui-card-body">
                            <c:forEach items="${contentNotifications}" var="content">
                                <a href="<%=basePath%>manager/contentNotification/${content.id}.html">${content.name}</a>
                                <hr>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <table class="layui-table">
                    <div class="layui-card-header">今日交易统计</div>
                    <colgroup>
                        <%-- <col width="150">
                         <col width="150">
                         <col width="200">
                         <col>--%>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>支付类型</th>
                        <th>支付通道</th>
                        <th>笔数</th>
                        <th>订单金额</th>
                        <th>成功笔数</th>
                        <th>成功金额</th>
                        <th>服务费</th>
                    </tr>
                    </thead>
                    <tbody>
                    <div>
                        <c:if test="${tradeStatistics[0]==null}">
                            <tr>
                                <td>暂无数据</td>
                                <td>暂无数据</td>
                                <td>0</td>
                                <td>￥0</td>
                                <td>0</td>
                                <td>￥0</td>
                                <td>￥0</td>
                            </tr>
                        </c:if>
                        <c:if test="${tradeStatistics[0]!=null}">
                            <c:forEach items="${tradeStatistics}" var="tradeStatistic">
                                <tr>
                                    <td>${tradeStatistic.orderType==null?"无":tradeStatistic.orderType}</td>
                                    <td>${tradeStatistic.channelPayway}</td>
                                    <td>${tradeStatistic.sum}</td>
                                    <td>￥${tradeStatistic.grandTotal}</td>
                                    <td>${tradeStatistic.successSum}</td>
                                    <td>￥${tradeStatistic.successTotal}</td>
                                    <td>￥${tradeStatistic.serviceFee}</td>
                                </tr>
                            </c:forEach>
                        </c:if>
                    </div>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header" id="content">订单统计(近七日)</div>
                <div class="layui-card-body">
                    <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade"
                         lay-filter="LAY-index-dataview" lay-anim="fade" lay-indicator="inside" lay-arrow="none">
                        <div carousel-item>
                            <div id="LAY-index-dataview" style="width:1126px"></div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        /*基于准备好的dom，初始化echarts实例*/
                        var dayList = '${daysList}';
                        var js = JSON.parse(dayList);
                        var myChart = echarts.init(document.getElementById('LAY-index-dataview'));
                        var data = [
                            /* {name:''+js[0].name+ ' 00:00:29', value:[""+js[0].name+ "00:00:29", js[0].value]},*/
                        ];
                        //时间显示范围
                        var anchor = [];
                        for (var i in js) {
                            data.push({
                                name: '' + js[i].name + ' 00:00:00',
                                value: ["" + js[i].name + " 00:00:00", js[i].value]
                            })
                            if (i == 0) {
                                anchor.push({name: js[0].name, value: [js[0].name, 0]})
                            } else if (i == js.length - 1) {
                                anchor.push({name: js[i].name, value: [js[i].name, 0]})
                            }
                        }
                        option = {
                            backgroundColor: '#fff',//背景色
                            grid: {
                                left: 35,
                                right: 20,
                                top: 10,
                                bottom: 40,
                                show: false
                            },
                            tooltip: {
                                // trigger: 'axis',
                                formatter: function (param) {
                                    return '日期:' + param.value[0] + "<br>" + '交易金额:' + param.value[1] + '元';
                                }
                            },
                            xAxis: {
                                type: "time",
                                /*splitNumber: 10,*/
                                axisLabel: {
                                    // rotate: 60,
                                    textStyle: {
                                        fontSize: 8,

                                    }
                                }
                            },
                            yAxis: {
                                min: 0
                            },
                            series: [{
                                data: data,
                                markLine: {
                                    silent: true,
                                },
                                type: 'line',
                                smooth: true,
                                markArea: {
                                    data: [
                                        [
                                            {yAxis: 37},
                                            {}
                                        ]
                                    ],
                                    itemStyle: {
                                        opacity: 0.5,
                                        color: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [{
                                                offset: 0, color: '#fff' // 0% 处的颜色
                                            },
                                                {
                                                    offset: 1, color: '#E7AEAD' // 100% 处的颜色
                                                }
                                            ],
                                            globalCoord: false // 缺省为 false
                                        }
                                    }
                                }
                            },
                                {
                                    name: '.anchor',
                                    type: 'line',
                                    showSymbol: false,
                                    data: anchor,
                                    itemStyle: {normal: {opacity: 0}}, //不绘制该线条
                                    lineStyle: {normal: {opacity: 0}}
                                }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="../../resources/inc/footer.jsp" %>

<script>
    layui.config({
        base: '<%=basePath%>resources/lib/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'console', 'layer', 'table'], function () {
        var $ = layui.$
            , form = layui.form
            , table = layui.table;
    });
</script>
</body>
</html>


